<template>
    <div class="container-grid bv">
          <zb-header-search
                ref="searchHeader"
                :valueTransform="enquiryData.valueTransform"
                :rule="enquiryData.inputs"
                :btns="enquiryData.btns"
                :btnsData="permissionsData"
                :searchBtn="enquiryData.searchBtn"
                @search="onQueryClick"
            ></zb-header-search>
        <div class="b1">
            <vxe-grid
                ref="xTable"
                v-bind="gridConfig"
                :data="tableList.data"
                :columns="tableList.column"
                :rowClassName="tableList.formatRowClass"
            >
                <template v-slot:operation="{ row }">
                    <zb-btn-group
                        :btns="tableList.btns"
                        :data="{ row, permissionsData }"
                    ></zb-btn-group>
                </template>
            </vxe-grid>
        </div>
        <div class="pagination-el bh bend">
            <el-pagination
                @size-change="onSizeChange"
                @current-change="onCurrentChange"
                :current-page="tableList.pagination.curr"
                :page-sizes="gridConfig.pageSizes"
                :page-size="tableList.pagination.limit"
                :total="tableList.pagination.total"
                layout="total, sizes, prev, pager, next, jumper"
            ></el-pagination>
        </div>
        <dialogForm
            ref="dialogForm"
            @submitSuccess="onSubmitSuccess"
            @closeDialog="onCloseDialog"
        ></dialogForm>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action } from "vuex-class";
import { mixinColumnGrid } from "@/mixin/ColumnGrid";
import { mixinAccess } from "@/mixin/Access";
import { mixinDialogFormParent } from "@/mixin/dialog/FormParent";
import dialogForm from "./Edit.vue";
@Component({
    name: "HouseBuildingsGrid",
    mixins: [
        mixinColumnGrid,
        mixinAccess,
        mixinDialogFormParent
    ],
    components: {
        dialogForm
    }
})
export default class HouseBuildingsGrid extends Vue {
    @Action("houseBuildings/list") gridList: any;
    @Action("houseBuildings/del") delItem: any;

        // 查询头配置
    enquiryData: any = {
        searchBtn: {
            condition: ["query"]
        },
        btns: [
            {
                label: "新增",
                class: "btn-blue",
                condition: ["add"],
                handleClick: (this as any).onAddClick
            }
        ],
        inputs: [
            {
                type: "input",
                field: "area_no",
                title: "编号",
                props: {
                    maxlength: 4
                },
                validate: [
                    {
                        min: 3,
                        message: "请输入3-4位编号"
                    }
                ]
            },
            {
                type: "select",
                field: "room_orientations",
                title: "朝向"
            },
            { type: "select", field: "area_type", title: "类型" },
            { type: "select", field: "room_status", title: "状态" }
        ]
    };

    // 列表配置
    tableList: any = {
        column: [
            {
                title: "楼栋sn",
                field: "build_sn",
                minWidth: 150
            },
            {
                title: "楼栋名称",
                field: "build_name",
                minWidth: 150
            },
            {
                title: "楼栋建筑面积",
                field: "build_size",
                minWidth: 140,
                formatter: function ({ cellValue }: any) {
                    return cellValue + "m²";
                }
            },
            {
                title: "楼栋电梯数量",
                field: "elevator_num",
                minWidth: 120
            },
            {
                title: "房间数量",
                field: "area_num",
                minWidth: 80
            },
            {
                title: "楼层",
                field: "floor_num"
            },
            {
                showOverflow: "ellipsis",
                fixed: "right",
                title: "操作",
                slots: {
                    default: "operation"
                },
                headerAlign: "center",
                align: "left",
                width: 120
            }
        ],
        btns: [
            {
                label: "修改",
                condition: ["permissionsData.edit"],
                handleClick: (this as any).onEditClick
            },
            {
                label: "删除",
                condition: ["permissionsData.del"],
                handleClick: this.onDelClick
            }
        ],
        proxy: {
            requestFun: (this as any).gridList
        }
    };

    onDelClick({ row }: any) {
        const me = this as any;
        me.delList(row.build_sn, "该楼栋");
    }
}
</script>
